<template>
    <el-main>

      <div style="background-color: wheat">
          <p>维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</p>
          <p style="color: red">确保您的隐私不被泄露，请勿填写虚假信息。</p>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="收房合同编号" prop="sfContractNo" >
              <el-input v-model="ruleForm.sfContractNo" readonly></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-popover
              placement="right"
              width="800"
              trigger="click">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="小区名称">
                  <el-input v-model="formInline.ownerName" placeholder="小区名称"></el-input>
                </el-form-item>
                <el-form-item label="业主名称">
                  <el-input v-model="formInline.premiseName" placeholder="业主名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
              <el-table :data="gridData">
                <el-table-column width="200" property="ownerName" label="业主姓名"></el-table-column>
                <el-table-column width="200" property="houseName" label="房产信息"></el-table-column>
                <el-table-column width="200" property="conSignTime" label="签约日期"></el-table-column>
                <el-table-column property="address" hidden></el-table-column>
                <el-table-column width="200" label="操作">
                  <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-check" circle @click="byIdContract(scope.row.id)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[1, 2, 3, 4 ,5]"
                :page-size="this.formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total">
              </el-pagination>
              <el-button slot="reference">收房合同查询</el-button>
            </el-popover>
          </div></el-col>
        </el-row>
        <el-form-item label="房产信息" prop="houseName">
          <el-input v-model="ruleForm.houseName" readonly></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="业主姓名" prop="ownerName">
              <el-input v-model="ruleForm.ownerName" readonly></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="业主手机号" prop="ownerMobile">
              <el-input v-model="ruleForm.ownerMobile" readonly></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="业主身份证号" prop="ownerIdCard">
              <el-input v-model="ruleForm.ownerIdCard" readonly></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="银行卡号" prop="bankName">
              <el-input v-model="ruleForm.bankName" readonly></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="ruleForm.bankName" readonly></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="开行户" prop="bankOpen">
              <el-input v-model="ruleForm.bankOpen" readonly></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="金融产品选择" prop="productId">
              <el-select v-model="ruleForm.productId" placeholder="请选择活动区域" @change="Chanpin">
                <el-option v-for="item in productList" :label="item.jrProductName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="年利率" prop="rate">
              <el-input v-model="ruleForm.rate"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="借款期限" prop="periods">
              <el-input v-model="ruleForm.periods"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="年一次性服务费率" prop="serviceFee">
              <el-input v-model="ruleForm.serviceFee"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item label="借款金额" prop="balance">
              <el-input v-model="ruleForm.balance" readonly></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="授信额度" prop="creditLine">
              <el-input v-model="ruleForm.creditLine" readonly></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>

        <div v-if="this.formData.payAbleCount!=null">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
          <el-table-column
            prop="no"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="realEstateInfo"
            label="房产信息"
            width="180">
          </el-table-column>
          <el-table-column
            prop="roomCode"
            label="房源编号">
          </el-table-column>
          <el-table-column
            prop="monthRepaymentAmount"
            label="账期还款金额"
            width="180">
          </el-table-column>
          <el-table-column
            prop="monthRateAmount"
            label="账期利息"
            width="180">
          </el-table-column>
          <el-table-column
            label="借款期限">
            <template slot-scope="scope">
                {{scope.row.starLoanday}}至{{scope.row.endLoanday}}
            </template>
          </el-table-column>
        </el-table>
          <el-form ref="formData" :model="formData" label-width="80px">
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="应付租约合计">
                <el-input v-model="formData.payAbleCount" readonly></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">
              <el-form-item label="还款总额合计">
                <el-input v-model="formData.rePaymentCount" readonly></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="服务费">
                <el-input v-model="formData.serviceFee" readonly></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">
              <el-form-item label="收房贷利息合计">
                <el-input v-model="formData.interestCount" readonly></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
        </el-form>
        </div>

          <el-button round @click="xiangqing()">分期计算详情</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-main>
</template>

<script>

  import {getSfloanList,getbyIdContract,ByProductList,listSfLoan,sfloan} from "@/api/financial/rentInstall";

    export default {
        name: "sfloan",
        data() {
            return{
              ruleForm:{},
              rules:{},
              gridData: [],
              formInline:{pageNum:1,pageSize:5},
              currentPage4:1,
              total:0,
              productList:[],
              tableData:[],
              formData:{}
            };
        },
        methods:{
          xiangqing() {
            var flag = true;
            if(this.ruleForm.sfContractNo==null){
              alert("请先选择收房合同!");
              flag=false;
            } else if(this.ruleForm.balance==null){
              alert("借款金额为0,请重新选择收房合同");
              flag=false;
            } else if(this.ruleForm.rate == null) {
              alert("请输入利率(年化)！");
              flag=false;
            }
            else if(this.ruleForm.serviceFee == null) {
              alert("请输入一次性服务费率！");
              flag=false;
            }  else if(this.ruleForm.productId == null) {
              alert("请选择金融产品！");
              flag=false;
            } else {
              flag=true;
            }

            if (flag){
              //tableData:[],formData:{}
              this.ruleForm.contractId=this.ruleForm.id
               listSfLoan(this.ruleForm).then(res=>{
                  this.tableData=res.data.sfLoan
                  this.ruleForm.periodsA=this.tableData.length
                  this.formData=res.data
               })
            }
          },
          byIdContract(id) {
            getbyIdContract({id:id}).then(res=>{
               this.ruleForm=res.data
            })
          },
          //就绪函数，收房合同查询 gridData，分页和模糊查formInline
          getSfloan() {
             getSfloanList(this.formInline).then(res=>{
                  this.gridData=res.rows
                  this.total=res.total
             })
          },
          /*分页*/
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formInline.pageSize=val
            this.getSfloan()
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.formInline.pageNum=val
            this.getSfloan()
          },
          /*提交*/
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  var flag = true;
                  if(this.ruleForm.sfContractNo==null){
                    alert("请先选择收房合同!");
                    flag=false;
                  }
                  if(this.ruleForm.balance==null){
                    alert("借款金额为0,请重新选择收房合同");
                    flag=false;
                  }
                  if(this.ruleForm.rate == null) {
                    alert("请输入利率(年化)！");
                    flag=false;
                  }
                  if(this.ruleForm.serviceFee == null) {
                    alert("请输入一次性服务费率！");
                    flag=false;
                  }  else if(this.ruleForm.productId == null) {
                    alert("请选择金融产品！");
                    flag=false;
                  }
                  if (flag){
                    sfloan(this.ruleForm).then(res=>{
                        if (res.data.result){
                            alert("新增成功")
                        }else {
                          this.$message.error(res.data.msg)
                        }
                    })
                  }
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          onSubmit() {
            console.log('submit!');
            this.getSfloan()
          },
          getProductList() {
            ByProductList().then(res=>{
                this.productList=res.data
            })
          },
          Chanpin() {
            this.productList.forEach(a=>{
              if (a.id==this.ruleForm.productId){
                    this.ruleForm.instalmentPeriod=a.instalmentPeriod
                    this.ruleForm.creditLine=a.creditLine
              }
            })
          }
        },
        created() {
            //就绪函数，收房合同查询 gridData，分页和模糊查formInline
            this.getSfloan()
            this.getProductList()
        }
    }
</script>

<style>

</style>
